<script setup lang="ts">
import { sys_common_status, sys_oper_type } from '/@/const/Options.ts'
import { usePagination } from '/@lib/hooks/usePagination.ts'
import { useLoading } from '/@lib/hooks/useLoading'
import { useForm } from '/@lib/hooks/useForm.ts'
import { formatDateTimeForHMS } from '/@lib/utils/tool.ts'
import { OperLogQuery, OperLogVO } from '/@/api/monitor/sysOperLog/types.ts'
import { ApiSysOperLog } from '/@/api/monitor/sysOperLog'
import { addDateRange } from '/@lib/utils/vipUtil.ts'
import OperLogDetail from './OperLogDetail.vue'


defineOptions({ name: 'sysOperLog' })

const { loading, showLoading, hideLoading } = useLoading()
const { pageNum, pageSize, total, setTotal, onChangeCurrent, onChangePageSize } = usePagination(() => getTableList())
const queryFormRef = ref()
const defaultSort = ref<any>({ prop: 'operTime', order: 'descending' })
const dateRange = ref<[DateModelType, DateModelType]>(['', ''])
const { form: queryParams } = useForm<OperLogQuery>({
  pageNum: computed(() => pageNum.value),
  pageSize: computed(() => pageSize.value),
  operIp: '',
  title: '',
  operName: '',
  businessType: '',
  status: '',
  orderByColumn: defaultSort.value.prop,
  isAsc: defaultSort.value.order
})
const tableRef = ref()
const tableData = ref<OperLogVO[]>([])
const tableFixed = ref('right')
const DetailRef = ref()

/** 搜索按钮操作 */
const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 详细按钮操作 */
const handleDetail = (row: OperLogVO) => {
  DetailRef.value?.open(row)
}

const getTableList = async () => {
  showLoading()
  try {
    const res = await ApiSysOperLog.page(addDateRange(queryParams, dateRange.value))
    tableData.value = res.rows
    setTotal(res.total)
  } finally {
    hideLoading()
  }
}
getTableList()
</script>

<template>
  <div class="page-container">

    <el-card shadow="never" class="card-body-no-padding-bottom">
      <VipQueryForm>
        <VipQueryFormTopPanel>
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="操作地址" prop="operIp">
              <el-input v-model="queryParams.operIp" placeholder="请输入操作地址" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="系统模块" prop="title">
              <el-input v-model="queryParams.title" placeholder="请输入系统模块" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="操作人员" prop="operName">
              <el-input v-model="queryParams.operName" placeholder="请输入操作人员" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="类型" prop="businessType">
              <el-select v-model="queryParams.businessType" placeholder="操作类型" clearable>
                <el-option v-for="dict in sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="queryParams.status" placeholder="操作状态" clearable>
                <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="操作时间" style="width: 308px">
              <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button plain type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </VipQueryFormTopPanel>
      </VipQueryForm>
    </el-card>

    <el-card shadow="never" class="flex-column flex-auto no-margin-bottom">
      <div class="flex-auto">
        <el-table ref="tableRef" v-loading="loading" :data="tableData" border style="height: 100%">
          <!--          <el-table-column type="selection" align="center" width="50" />-->
          <el-table-column type="index" align="center" label="序号" width="55" />

          <!--  主内容   -->
          <el-table-column label="日志编号" align="center" prop="id" />
          <el-table-column label="系统模块" align="center" prop="module" width="140" show-overflow-tooltip />
          <el-table-column label="功能描述" align="center" prop="title" show-overflow-tooltip />
          <!--          <el-table-column label="操作类型" align="center" prop="businessType">-->
          <!--            <template #default="scope">-->
          <!--              <VipDictTag :options="sys_oper_type" :value="scope.row.businessType" />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
            label="操作人员"
            align="center"
            width="110"
            prop="operName"
            show-overflow-tooltip
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
          />
          <el-table-column label="部门" align="center" prop="deptName" width="130" show-overflow-tooltip />
          <el-table-column label="操作IP" align="center" prop="operIp" width="130" show-overflow-tooltip />
          <el-table-column label="IP地点" align="center" prop="operLocation" width="130" show-overflow-tooltip />
          <el-table-column label="操作状态" align="center" prop="status" width="100">
            <template #default="scope">
              <VipDictTag :options="sys_common_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="操作日期" align="center" prop="operTime" width="180" sortable="custom"
                           :sort-orders="['descending', 'ascending']">
            <template #default="scope">
              <span>{{ formatDateTimeForHMS(scope.row.operTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="消耗时间"
            align="center"
            prop="costTime"
            width="110"
            show-overflow-tooltip
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
          >
            <template #default="scope">
              <span>{{ scope.row.costTime }}毫秒</span>
            </template>
          </el-table-column>

          <!--          v-permissions="['monitor:operlog:edit']"-->
          <!--  操作栏   -->
          <el-table-column label="操作" :fixed="tableFixed" align="center" width="100">
            <template #default="{ row }">
              <el-space>
                <el-button text type="primary" link @click="handleDetail(row)">详情</el-button>
              </el-space>
            </template>
          </el-table-column>

          <template #empty>
            <el-empty class="vip-data-empty" description="暂无数据" />
          </template>
        </el-table>
      </div>

      <VipPagination
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        @current-change="onChangeCurrent"
        @size-change="onChangePageSize"
      />
    </el-card>

    <OperLogDetail ref="DetailRef" />

  </div>
</template>

<style scoped lang="scss">
</style>
